﻿@using System.Data
@using STX.Domain
@model STX.Admin.Models.BizActivity.AddQuoteModel
@{
    ViewBag.Title = "Add";
    Layout = null;
    STX.Domain.TabAdministrator CurUser = ViewBag.CurUser;
}
<style>
    #addquoteform .selectareadiv{}
    #addquoteform .inputActivityDiv{ display: none;}
    #addquoteform .tp{ position: absolute; width: 800px; z-index: 9; display: none;}
    #addquoteform .tp ul{ background: #fff;padding: 5px;border: #333333 1px solid;}
    #addquoteform .tp ul li{ border-bottom: #eee 1px solid;padding: 5px; cursor: pointer }
    #addquoteform .tp ul li:hover{ background:#f0e68c}
    #addquoteform .tp ul li.active{ background:#f0e68c}

    #addquoteform .tempQuotePrice{ position: absolute; width: 200px; z-index: 9; display: none;}
    #addquoteform .tempQuotePrice ul{ background: #fff;padding: 5px;border: #333333 1px solid;}
    #addquoteform .tempQuotePrice ul li{ border-bottom: #eee 1px solid;padding: 5px; }
</style>
<form class="pageForm addpage" action="@Url.Action("saveaddquote")" method="post" id="addquoteform">
    <div style=" height:100%; width:100%; overflow:hidden" class="verticalSplitContainer">
        <div class="pageFormContent" ratio="*">
            <div class="selectareadiv" >
                <table style="width:100%">
                    <tr>    
                        <td width="15%">选择活动主地方：<select name="AreaId">
                                                 <option value="-1">请选择地方</option>
                                                 @foreach (var item in Model.Areas)
                                                 {
                                                     <option value="@item.Id">@item.Name</option>
                                                 }
                                             </select>
                        </td>
                    </tr>
                </table>
            </div> 
            <div class="inputActivityDiv">
                    <table style="width:100%">
                        <tr>    
                            
                            <td width="15%">活动名称：</td>
                            <td width="35%"><input name="Name" class="textInput" type="text" size="40" alt=""/></td>
                            <td width="15%">所属项目：</td>
                            <td width="35%"><select name="ProjectId">
                                                 <option value="-1">请选择项目</option>
                                            </select>
                            </td>
                        </tr>
                        <tr>    
                            <td width="15%">活动时间：</td>
                            <td width="35%"> <input name="StartTime" class="textInput datetime" type="text" size="8" value="@DateTime.Now.ToString("yyyy-M-d")" alt=""/> - <input name="EndTime" class="textInput datetime" type="text" size="8" value="@DateTime.Now.AddDays(2).ToString("yyyy-M-d")" alt=""/> <input name="TimeDetail" class="textInput" type="text" size="16"  alt=""/></td>
                            <td width="15%">活动地点：</td>
                            <td width="35%"><input name="Place" class="textInput" type="text" size="30"  alt=""/></td>
                        </tr>
                        <tr>    
                            <td width="15%">报价制作人：</td>
                            <td width="35%"><input name="QuotationTabulator" class="textInput" type="text" size="30" value="@CurUser.Name" readonly="readonly"  alt=""/></td>
                            <td width="15%">制表时间：</td>
                            <td width="35%"><input name="QuotationGeneratedTime" class="textInput datetime" type="text" size="15" value="@DateTime.Now.ToString("yyyy-MM-dd")" disabled="disabled"  alt=""/></td>
                        </tr>
                        @*
                        <tr>    
                            <td width="15%">成本制表人：</td>
                            <td width="35%"><input name="CostTabulator" class="textInput" type="text" size="30"  alt=""/></td>
                            <td width="15%">制表时间：</td>
                            <td width="35%"><input name="CostGeneratedTime" class="textInput datetime" type="text" size="15" value="" alt=""/></td>
                        </tr>*@
                        <tr>
                            <td width="15%">执行：</td>
                            <td width="35%"><input name="Executor" class="textInput" type="text" size="30"  alt=""/></td>    
                            <td width="15%">负责人：</td>
                            <td width="35%"><input name="ResponsiblePerson" class="textInput" type="text" size="30"  alt=""/></td>
                        </tr>
                        <tr>    
                            <td width="15%">策划：</td>
                            <td width="35%"><input name="Planner" class="textInput" type="text" size="30" alt=""/></td>
                            <td width="15%">司机：</td>
                            <td width="35%"><input name="Driver" class="textInput" type="text" size="30" alt=""/></td>
                        </tr>
                    </table>
                    <table style="width: 100%" id="tablepricelsit">
                        
                        <tr style="opacity: 0;">
                            <td style="width:50px;"><input name="" style="width:50px;" class="textInput" /></td>
                            <td style="width:100px;"><input name="" style="width:50px;" class="textInput" /></td>
                            <td style="width:200px;"><input name="" class="textInput" type="text" style="width:200px;"/> </td>
                            <td style="width:50px;"><input name="" class="textInput" type="text" style="width:50px;"/></td>
                            <td style="width:50px;"><input name="" class="textInput" type="text" style="width:50px;"/></td>
                            <td style="width:50px;"><input name="" class="textInput" type="text" style="width:50px;"/></td>
                            <td style="width:50px;">@(Html.DropDownListFromEnum<STX.Domain.BizActivityItem.MaterialFormEnum>(0, "select"))</td>
                            <td style="width:50px;">@(Html.DropDownListFromEnum<STX.Domain.BizActivityItem.MaterialBelongEnum>(0, "select"))</td>
                        </tr>
                        <tr>
                            <td style="width:50px;"><h6 style="width:40px;">编号</h6></td>
                            <td style="width:100px;"><h6 style="width:50px;">项目</h6></td>
                            <td style="width:200px;"><h6 style="width:190px;">具体要求</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">单位</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">数量</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">报价</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">小计</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">物料形式</h6></td>
                            <td style="width:50px;"><h6 style="width:50px;">物料归属</h6></td>
                        </tr>
                    </table>
                    @for (var i=0;i<Model.MaterialCategories.Count;i++)
                    {
                        var item = Model.MaterialCategories[i];
                        <div class="materialitem">
                            <h4 style=" background: #c0c0c0; padding: 6px;">@item.Name</h4>
                            <table style="width: 100%">
                                <tr class="datatr">
                                    <td style="width:50px;" style="position: relative"><input onkeyup="getTp(event,this)" name="BizActivityItems[@i].TpCode" style="width:50px;" class="textInput" type="text"/></td>
                                    <td style="width:100px;" style="position: relative"><input onkeyup="getTp(event,this)" name="BizActivityItems[@i].Name" style="width:100px;" class="textInput" type="text"/></td>
                                    <td style="width:200px;"><input name="BizActivityItems[@i].Require" class="textInput tips" type="text" style="width:200px;" onblur="chkRequire(this)" /> </td>
                                    <td style="width:50px;"><input name="BizActivityItems[@i].Unit" class="textInput" type="text" style="width:50px;" /></td>
                                    <td style="width:50px;" style="position: relative"><input name="BizActivityItems[@i].Numb" class="textInput" type="text" style="width:50px;" value="0" onkeyup="calculate(this);SumAllTable()" onfocus="showQuotePrice(this)"  onblur="hideQuotePrice(this);SumAllTable()"/></td>
                                    <td style="width:50px;"><input name="BizActivityItems[@i].QuotationPrice" onkeyup="SumAllTable()" class="textInput" type="text" style="width:50px;" value="0" alt=""/></td>
                                    <td style="width:50px;"><input name="rowsum" class="textInput" disabled="disabled" type="text" style="width:50px;" value="0" alt=""/></td>
                                    <td style="width:50px;">@(Html.DropDownListFromEnum<STX.Domain.BizActivityItem.MaterialFormEnum>(1, "BizActivityItems[" + @i + "].MaterialForm"))</td>
                                    <td style="width:50px;">@(Html.DropDownListFromEnum<STX.Domain.BizActivityItem.MaterialBelongEnum>(0, "BizActivityItems[" + @i + "].MaterialBelong")) <input type="hidden" name="BizActivityItems[@i].MaterialCategoryId" value="@item.Id"/></td>
                                </tr>
                                <tr>
                                    <td colspan="5" align="left">总计</td>
                                    <td colspan="5"  align="left"><input name="sumbycat" class="textInput" disabled="disabled" type="text" style="width:50px;" value="0" alt=""/></td>
                                </tr>
                            </table>
                            <table style="width: 100%" class="datatb">

                            </table>
                            <div style="padding: 0 0 10px 0"><a href="javascript:;" title="添加一行" class="addtr" style="font-size: 16px; font-weight: bold; text-decoration: none; color: #228b22">+</a>&nbsp;&nbsp;<a href="javascript:;" title="删去一行" class="removetr" style="font-size: 16px; font-weight: bold; text-decoration: none; color:crimson">-</a></div>
                        </div>
                    }
                    <table style="width: 100%">
                        
                        <tr>
                            <td>整张表合计 报价：<input name="totalquote" disabled="disabled" class="textInput" type="text" style="width:200px;"/> </td>
                        </tr>
                       
                    </table>
                </div>
        </div>

        <div class="formBar" ratio="#30">
            <ul>
                
                <li><div class="simplebutton"><div class="r"><button type="button" class="submit">提交</button></div></div></li>
                @Html.Partial("~/Administrator/Views/BizActivity/Step.cshtml", new STX.Admin.Models.BizActivity.StepModel( StepEnum.制作成本))
            </ul>
        </div>
    </div>
    <script type="text/javascript">

       function SumTable($table,fun){
           $table.find("input[name='sumbycat']").val(0);
           $("tr.datatr",$table).each(function(){
                    var numb = parseFloat($(this).find("input[name*='Numb']").val());
                    var quoteprice = parseFloat($(this).find("input[name*='QuotationPrice']").val());
                    var sumbycat = parseFloat($table.find("input[name='sumbycat']").val());
                    var rowsum = numb*quoteprice;
                    $(this).find("input[name='rowsum']").val(rowsum.toFixed(2));
                    $table.find("input[name='sumbycat']").val((sumbycat+rowsum).toFixed(2));
                    fun(rowsum);
           }); 
       }

      function SumAllTable()
      {
          $("input[name='totalquote']").val(0);
          $("#addquoteform .materialitem table").each(function() {
              SumTable($(this), function(cur_tb_total_quote) {
                  var totalquote = parseFloat($("input[name='totalquote']").val());
                  $("input[name='totalquote']").val((totalquote + cur_tb_total_quote).toFixed(2));
              });
          });
      }

      function chkRequire(obj) {
          var $this = $(obj);
          var data = $this.attr("data");
          var val = $this.val();
          if (data) {
              if (val.indexOf(data) != 0) {
                  alert('请勿修改原有具体要求\r\n\r\n可在具体要求后边填写数据');
                  $this.val(data);
                  $this.focus();
              }
          }
      }

       function keyUp(obj) {
            var $ul = $(obj).parent().find("ul");
            var $active = $ul.find(".active");
            if ($ul.find(".active").size() == 0) {
                $ul.find("li").first().addClass("active");
                return;
            }
            var index = $active.index();
            index--;
            if (index == -1) {
                index = $ul.find("li").size() - 1;
            }
            $ul.find("li").removeClass("active");
            $ul.find("li").eq(index).addClass("active");
        }

        function keyDown(obj) {
            var $ul = $(obj).parent().find("ul");
            var $active = $ul.find(".active");
            if ($ul.find(".active").size() == 0) {
                $ul.find("li").first().addClass("active");
                return;
            }
            var index = $active.index();
            index++;
            if (index == $ul.find("li").size()) {
                index = 0;
            }
            $ul.find("li").removeClass("active");
            $ul.find("li").eq(index).addClass("active");
        }

        function keyEnter(obj) {
            var $ul = $(obj).parent().find("ul");
            if ($ul.find(".active").size() == 0) {
                return;
            }
            SetTrData(obj);
        }

        function SetTrData(obj) {
            var $ul = $(obj).parent().find("ul");
            var $active = $ul.find(".active");
            if ($ul.find(".active").size() == 0) {
                $(obj).parent().removeAttr("data");
                return;
            }
            $(obj).parent().parent().attr("data", $active.attr("data"));
            $ul.parent().remove();
            SetInput($(obj).parent());
        }

        function SetInput($td) {
            var $tr = $td.parent();
            var data = $tr.attr("data");
            if (!data) {
                $tr.find("input[name*='Require']").removeAttr("readonly").removeAttr("data").val('');
                $tr.find("input[name*='Unit']").removeAttr("readonly").val('');
                $tr.find("input[name*='QuotationPrice']").removeAttr("readonly").val('');
                $tr.find("input[name*='TpCode']").val('');
                return;
            }
            var json = JSON.parse(data);
            $tr.find("input[name*='TpCode']").val(json.TpCode);
            $tr.find("input[name*='Name']").val(json.Name);
            $tr.find("input[name*='Require']").attr("data", json.Required).val(json.Required);
            $tr.find("input[name*='Unit']").attr("readonly", "readonly").val(json.Unit);
            showQuotePrice($tr.find("input[name*='Numb']").get());
            $tr.find("input[name*='Numb']").select();
        }


        function showQuotePrice(obj) {
            var $this = $(obj);
            var $td = $this.parent();
            var $tr = $this.parent().parent();
            var data = $tr.attr("data");
            if (!data) {
                return;
            }
            var json = JSON.parse(data);
            var $quotePrice = $td.find(".tempQuotePrice");
            if ($quotePrice.size() == 0) {
                $("<div class='tempQuotePrice'><ul></ul></div>").appendTo($td);
            }
            var $box = $td.find(".tempQuotePrice");
            $box.show().find("ul").empty();
            $.each(json.QuotePrices, function(i, d) {
                var $li = $('<li>数目：' + d.StartNum + ' 至 ' + d.EndNum + ' 价格：' + d.QuotePrice + '</li>');
                $box.find("ul").append($li);
            });
        }

        function hideQuotePrice(obj) {
            var $this = $(obj);
            var $td = $this.parent();
            $td.find(".tempQuotePrice").hide();
            calculate(obj);
        }

        function calculate(obj) {
            var $this = $(obj);
            var val = $this.val();
            if (!val.isNumber) {
                alert('需输入纯数字');
                return;
            }
            
            var $td = $this.parent();
            var $tr = $td.parent();
            var data = $tr.attr("data");
            if (!data)return;
            var json = JSON.parse(data);
            $.each(json.QuotePrices, function(i, d) {
                if (val <= d.EndNum && val >= d.StartNum) {
                    //$tr.find("input[name*='QuotePriceId']").val(d.Id);
                    $tr.find("input[name*='QuotationPrice']").attr("readonly", "readonly").val(d.QuotePrice);
                    if (d.ProjectCostPrice) {
                        $tr.find("input[name*='ProjectCostPrice']").attr("readonly", "readonly").val(d.ProjectCostPrice);
                    }
                    if (d.FinanceCostPrice) {
                        $tr.find("input[name*='FinanceCostPrice']").attr("readonly", "readonly").val(d.FinanceCostPrice);
                    }
                }
            });     
           
        }

        function getTp(e, obj) {

            if (e.keyCode == 38) {
                keyUp(obj);
                return;
            }
            if (e.keyCode == 40) {
                keyDown(obj);
                return;
            }
            if (e.keyCode == 13) {
                keyEnter(obj);
                return;
            }

            var $this = $(obj);
            var $td = $this.parent();
            var $tr = $td.parent();
            var val = $this.val();
            if (!val) {
                $tr.removeAttr("data");
                $td.find(".tp").remove();
                SetInput($td);
                return;
            }

            if (val == $this.attr("oldvalue")) {
                return;
            }
            $this.attr("oldvalue", val);
            var data = { key: val , areaId: $("#addquoteform select[name='AreaId']").val() };
            var option = {
                url: "@Url.Action("GetQuotePriceTemplateData")",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(json) {
                    if (!json.success) {
                        $td.parent().removeAttr("data");
                        $td.find(".tp").remove();
                        SetInput($td);
                        return;
                    } else {
                        var $qpt = $td.find(".tp");
                        if ($qpt.size() == 0) {
                            $("<div class='tp'><ul></ul></div>").appendTo($td);
                        }
                        var $box = $td.find(".tp");
                        $box.show().find("ul").empty();
                        $.each(json.list, function(i, d) {
                            var $li = $('<li><span class="lightgreen">项目:'+d.Name+' </span> <span class="lightyellow">编号：' + d.TpCode + '</span> <span class="lightblue">要求：' + d.Required + '</span></li>');
                            $li.attr("data", JSON.stringify(d));
                            $box.find("ul").append($li);
                        });

                        //绑定li click 事件
                        $box.find("li").click(function() {
                            $box.find("li").removeClass("active");
                            $(this).addClass("active");
                            SetTrData(obj);
                        });
                    }
                }
            };
            $.ajax(option);


        }


        $(document).bind("click", function(e) {
            var target = $(e.target);
            if (target.closest("#addquoteform .tempQPT").length == 0) {
                $("#addquoteform .tempQPT").hide();
            }
        });

        $(function() {

            $("#addquoteform input").disabledinput();
            
            //选择地方
            $("#addquoteform select[name='AreaId']").change(function() {
                var val = $(this).val();
                if (val > 0) {
                    GetProjects(val);
                    $("#addquoteform .selectareadiv").hide();
                    $("#addquoteform .inputActivityDiv").show();

                }
            });

            //根据地方动态选择项目
            function GetProjects(areaid) {
                var data = { areaId: areaid };
                var option = {
                    url: "@Url.Action("GetProjectsByAreaId")",
                    data:data,
                    type:"POST",
                    dataType:"json",
                    success:function(json) {
                        $("#addquoteform select[name='ProjectId']").empty();
                        $.each(json.list,function(i, d) {
                            $("<option value='" + d.Id + "'>" + d.Name + "</option>").appendTo($("#addquoteform select[name='ProjectId']"));
                        });
                    }
                };
                $.ajax(option);
            }
                
            function AddOrRemoveCallback($thisarea) {
                SumAllTable()
                $("table tr.datatr", "#addquoteform .materialitem").each(function (i) {
                    $(this).find("input,select").each(function () {
                        var $thisinput = $(this);
                        $thisinput.attr("name", $thisinput.attr("name").replace(/\d+/g, i));
                    });
                });
            }



            $("#addquoteform .addtr").click(function (e) {
                var $thisMaterialItem = $(this).parentsUntil(".materialitem").parent();
                var $tr = $("table tr.datatr:last", $thisMaterialItem).clone();
                //$tr.appendTo($("table", $thisMaterialItem));
                $tr.insertAfter($("table tr.datatr:last", $thisMaterialItem));
                AddOrRemoveCallback($thisMaterialItem);
                $thisMaterialItem.find("tr.datatr:last").find("input:first").select();
            });

            $("#addquoteform .removetr").click(function () {
                var $thisMaterialItem = $(this).parentsUntil(".materialitem").parent();
                if ($("tr.datatr", $thisMaterialItem).size() > 1) {
                    $("tr.datatr:last", $thisMaterialItem).remove();
                    AddOrRemoveCallback($thisMaterialItem);
                }
            });
            

            //提示层

            $("input.tips").hover(function() {
                var $this = $(this);
                var val = $this.val();
                if(val.length>10){
                    var $td = $this.parent();
                    $td.css({"position":"relative"});
                    var $div = $td.find("div.tips");
                    if ($div.size() == 0) {
                        $div = $("<div class='tips'></div>");
                        $div.css({"position":"absolute","z-index":9,"width":600,"background":"#ffe4b5","border":"#ff8c00 1px solid","padding":5});
                    }
                    $div.text(val);
                    $div.appendTo($td);
               }
            }, function() {
                var $this = $(this);
                var val = $this.val();
                var $td = $this.parent();
                var $div = $td.find("div.tips");
                if ($div.size() > 0) {
                    $div.remove();
                }
            });
        });
    </script>
</form>